import {
  Card,
  Steps,
} from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';

const { Step } = Steps;

@connect(({ goods }) => ({
  goods,
  // submitting: loading.effects['login/login'],
}))
class AddGoods extends Component {
  state = {
    current: 0,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    // 获取规格列表
    dispatch({
      type: 'goods/fetchAttrs',
      payload: {},
    })
  }

  stepOnChange = current => {
    console.log('step步骤id:', current);
    this.setState({ current });
  };

  render() {
    const { current } = this.state;
    let stepComponent;
    if (current === 1) {
      stepComponent = <Step2 />;
    } else if (current === 2) {
      stepComponent = <Step3 />;
    } else {
      stepComponent = <Step1 />;
    }
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Steps size="small" type="navigation" current={current} onChange={this.stepOnChange} style={{
            marginBottom: 50,
            boxShadow: '0px -1px 0 0 #e8e8e8 inset',
          }}>
            <Step title="基本信息" />
            <Step title="规格信息（SKU）" />
            <Step title="商品详情" />
          </Steps>
          {stepComponent}
        </Card>

      </PageHeaderWrapper>
    )
  }
}

export default AddGoods;
